<template>
  <div>
    <div class="box">
			
			<div class="row">
				<label class="name">意见与反馈</label>
			</div>
			
			<div class="row text">
					<textarea
						v-model="opinion"
						class="input"
						maxlength="200"
						placeholder="点击这里填写你的建议、问题反馈等"
					>
					</textarea>
					<label class="word_count">{{word_count}}/200</label>
			</div>

			<div class="row">
				<div>
					<label class="name">相关截图（选填）</label>
					<label class="img-count">{{img_count}}/2</label>
				</div>
				
				<label v-for="(item,index) in src" :key="index">
					<img class="img" :src="item">
				</label>

				<label v-if="img_count < 2" @click="uploadPicture">
					<img class="add-img" :src="addimage" >
				</label>
			</div>

			<div class="row">
				<div class="name">微信号（选填）</div>
				<input
					v-model="wechat"
					class="wechat-input"
					max-length="20"
					placeholder="如果想要详细交流，可以点击这里留下微信号"	
				>
			</div>
		</div>
		<button @click="submit">提交</button>
  </div>
</template>

<script>
import {showModal, post } from '@/util'
export default {
  data () {
    return {
      opinion: '',
      word_count: 0,
      addimage: '../../static/images/addimage.png',
      img_count: 0,
      src: [],
      wechat: '',
      userinfo: wx.getStorageSync('userinfo') ? wx.getStorageSync('userinfo') : {}
    }
  },
  watch: {
    opinion () {
      this.word_count = this.opinion.length
    },
    src () {
      this.img_count = this.src.length
    }
  },
  methods: {
    uploadPicture () {
      let that = this
      wx.chooseImage({
        count: 2,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success (res) {
          const tempFilePaths = res.tempFilePaths
          that.src.push(tempFilePaths)
          console.log('that.src', that.src)
        }
      })
    },
    async submit () {
      if (this.word_count > 0) {
        try {
          const data = {
            openid: this.userinfo.openId,
            opinion: this.opinion,
            src: this.src.join(','),
            wechat: this.wechat
          }
          const res = await post('/weapp/createopinion', data)
          console.log('从后端返回的执行正确的信息是：', res)
          showModal('提交成功', '已将你的反馈提交给了开发者')
        } catch (err) {
          console.log('从后端返回的执行错误的信息是：', err)
          showModal('提交失败', '服务器出了一点错误，请稍后再试')
        }
      } else {
        showModal('提交失败', '反馈信息不能为空')
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.box {
	background: #fff;
	font-size: 15px;
	
	.text {
		height: 120px;
	}

	.row {
		border-bottom: 1px #E8E8E8 solid;
		padding: 5px 15px;

		.name {
			width: 80%;
			height: 40px;
			line-height: 40px;
		}

		.input {
			width: 100%;
			height: 85px;
			font-size: 14px;
			padding-top: 5px;
		}

		.word_count {
			float: right;
			line-height: 40px;
			color: #808080;
		}
		
		.img-count {
			float: right;
			line-height: 40px;
			color: #808080;
		}

		.add-img {
			width: 80px;
			height: 80px;
		}

		.img {
			width: 66px;
			height: 66px;
			margin-bottom: 7px;
			margin-right: 10px;
		}

		.wechat-input {
			font-size: 14px;
		}
	}

}

button {
	margin: 20px auto;
	width: 90%;
	border-radius: 5px;
	background: #EA5149;
	font-size: 16px;
	color: #FFF;
	font-weight: bold;
}
</style>